<template>
  <el-card class="box-card">
    <h2>加入含光AI应用开发平台</h2>
    <el-form :model="form" @submit.prevent="register">
      <el-form-item label="账号" placeholder="将作为登录账号">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="form.introduction" placeholder="个人简介"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100%;" type="warning" native-type="submit">注册</el-button>
      </el-form-item>
    </el-form>
    <p>已经有账号？<router-link to="/login">去登录</router-link></p>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        nickname: '',
        introduction: ''
      }
    };
  },
  methods: {
    async register() {
      try {
        const response = await fetch(`${import.meta.env.VITE_API_URL}/user/register`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.form)
        });
        let data = await response.json();
        data = data.data
        console.log(data);
        this.$router.push('/login'); // Redirect to login page after registration
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

<style scoped>
.box-card {
  width: 400px;
  margin: 100px auto;
}
</style>